<template>
  <t-space direction="vertical">
    <!-- 按钮操作区域 -->
    <t-radio-group v-model="size" variant="default-filled">
      <t-radio-button value="small">小尺寸</t-radio-button>
      <t-radio-button value="medium">中尺寸</t-radio-button>
      <t-radio-button value="large">大尺寸</t-radio-button>
    </t-radio-group>

    <!-- <t-space>
      <t-checkbox v-model="stripe"> 显示斑马纹 </t-checkbox>
      <t-checkbox v-model="bordered"> 显示表格边框 </t-checkbox>
      <t-checkbox v-model="hover"> 显示悬浮效果 </t-checkbox>
      <t-checkbox v-model="tableLayout"> 宽度自适应 </t-checkbox>
      <t-checkbox v-model="showHeader"> 显示表头 </t-checkbox>
    </t-space> -->

    <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
    <t-table
      row-key="index"
      :data="data"
      :columns="columns"
      :stripe="stripe"
      :bordered="bordered"
      :hover="hover"
      :table-layout="tableLayout ? 'auto' : 'fixed'"
      :size="size"
      :pagination="pagination"
      :show-header="showHeader"
      cell-empty-content="-"
      resizable
      lazy-load
      editable
      :editable-cell-state="() => true"
      
    >
    </t-table>
  </t-space>
</template>

<script setup lang="jsx">
import { ref } from 'vue';
import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon, SearchIcon, CloseIcon, ChevronDownIcon, TimeIcon } from 'tdesign-icons-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';

const statusNameListMap = {
  0: { label: '审批通过', theme: 'success', icon: <CheckCircleFilledIcon /> },
  1: { label: '审批失败', theme: 'danger', icon: <CloseCircleFilledIcon /> },
  2: { label: '审批过期', theme: 'warning', icon: <ErrorCircleFilledIcon /> },
};

const data = [];
const total = 28;
for (let i = 0; i < total; i++) {
  data.push({
    index: i + 1,
    applicant: ['贾明', '张三', '王芳'][i % 3],
    status: i % 3,
    channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
    detail: {
      email: ['w.cezkdudy@lhll.au', 'r.nmgw@peurezgn.sl', 'p.cumx@rampblpa.ru'][i % 3],
    },
    matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4],
    time: [2, 3, 1, 4][i % 4],
    createTime: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01'][i % 4],
    customInput: '1231231312', // 添加自定义输入框的值
  });
}

const stripe = ref(true);
const bordered = ref(true);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref('small');
const showHeader = ref(true);

// 处理输入框事件
const handleInputChange = (row, value, type) => {
  if (type === 'email') {
    row.detail.email = value;
  } else if (type === 'custom') {
    row.customInput = value;
  }
  console.log(value);
  // if (value=='感冒') {
  //   MessagePlugin.error('不允许输入感冒');
  //   row.customInput = '';
  // }
};

const handleInputFocus = (row) => {
  console.log('输入框获得焦点:', row.index);
  MessagePlugin.info(`正在编辑第 ${row.index} 行`);
};

const handleInputBlur = (row) => {
  console.log('输入框失去焦点:', row.index);
  if (row.customInput) {
    MessagePlugin.success(`第 ${row.index} 行保存成功`);
  }
};

const handleInputEnter = (row) => {
  
  if(row.customInput==''){
    
  } else {
    console.log('2222');
    MessagePlugin.success(`第 ${row.index} 行数据已提交`);
  }
};

// 添加搜索图标的点击事件处理函数
const handleSearchClick = (row) => {
  console.log('搜索图标被点击:', row.index, row.customInput);
  MessagePlugin.info(`正在搜索: ${row.customInput}`);
};

// 添加清除图标的点击事件处理函数
const handleClearClick = (row) => {
  console.log('清除图标被点击:', row.index);
  row.customInput = '';
  MessagePlugin.success('已清空输入');
};

const columns = ref([
  { 
    colKey: 'applicant', 
    title: '申请人', 
    width: '100',
    edit: {
      type: 'text',
      onEdited: (context) => {
        console.log('申请人编辑完成:', context.newValue);
      }
    }
  },
  {
    colKey: 'status',
    title: '申请状态',
    cell: (h, { row }) => {
      return (
        <t-tag shape="round" theme={statusNameListMap[row.status].theme} variant="light-outline">
          {statusNameListMap[row.status].icon}
          {statusNameListMap[row.status].label}
        </t-tag>
      );
    },
  },
  { 
    colKey: 'channel', 
    title: '签署方式',
    edit: {
      type: 'select',
      options: [
        { label: '电子签署', value: '电子签署' },
        { label: '纸质签署', value: '纸质签署' }
      ],
      onEdited: (context) => {
        console.log('签署方式编辑完成:', context.newValue);
      }
    }
  },
  { 
    colKey: 'detail.email', 
    title: '邮箱地址', 
    ellipsis: true,
    cell: (h, { row }) => {
      return (
        <t-select
          modelValue={row.detail.email}
          size="small"
          placeholder="请选择邮箱"
          onChange={(val) => {
            row.createTime = val;
            console.log('时间已更新:', val);
          }}
          class="full-width-input"
          options={[
            { label: 'w.cezkdudy@lhll.au', value: 'w.cezkdudy@lhll.au' },
            { label: 'r.nmgw@peurezgn.sl', value: 'r.nmgw@peurezgn.sl' },
            { label: 'p.cumx@rampblpa.ru', value: 'p.cumx@rampblpa.ru' }
          ]}
          suffixIcon={() => (
            <div style={{ display: 'flex', gap: '4px' }}>
              <ChevronDownIcon 
                style={{ cursor: 'pointer' }} 
              />
              
            </div>
          )}
        />
      );
    }
  },
  { 
    colKey: 'createTime', 
    title: '申请时间',
    width: '120',
    cell: (h, { row }) => {
      return (
        <t-date-picker
          modelValue={row.createTime}
          size="small"
          placeholder="请选择时间"
          class="full-width-input"
          format="YYYY-MM-DD"
          onChange={(val) => {
            row.createTime = val;
            console.log('时间已更新:', val);
          }}
          suffixIcon={() => (
            <div style={{ display: 'flex', gap: '4px' }}>
              <TimeIcon 
                style={{ cursor: 'pointer' }} 
              />
            </div>
          )}
        />
      );
    }
  },
  {
    colKey: 'customInput',
    title: '自定义输入',
    cell: (h, { row }) => {
      return (
        <t-input
          modelValue={row.customInput}
          size="small"
          
          onEnter={() => handleInputEnter(row)}
          placeholder="请输入内容"
          class="full-width-input"
          suffixIcon={() => (
            <div style={{ display: 'flex', gap: '4px' }}>
              <SearchIcon 
                style={{ cursor: 'pointer' }} 
                onClick={() => handleSearchClick(row)}
              />
              <CloseIcon 
                style={{ cursor: 'pointer' }} 
                onClick={() => handleClearClick(row)}
              />
            </div>
          )}
        />
      );
    }
  }
]);



const pagination = {
  defaultCurrent: 1,
  defaultPageSize: 5,
  total,
};
</script>

<style>
.full-width-input {
  width: 100% !important;
}

.full-width-input .t-input {
  width: 100% !important;
}

.t-table__cell-editing {
  padding: 0 !important;
}

.t-table__cell-editing .t-input {
  height: 100% !important;
}

.t-table__cell-editing .t-input__inner {
  height: 100% !important;
  border: none !important;
  padding: 0 8px !important;
}
</style>
